// https://vitepress.dev/guide/custom-theme
import { h, watchEffect, watch } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import { defineClientComponent, useData } from 'vitepress'

import MarkdownImg from '../components/markdown-img.vue'
import Discussion from '../components/discussion.vue'
import BackgroundStyle from '../components/BackgroundStyle.vue'
// import MyLayoutBottom from '../components/PageBottom.vue'

import "element-plus/dist/index.css"
import 'nprogress/nprogress.css'
import './style.css'
import './custom.css'

const MyLayoutBottom = defineClientComponent(() => {
  return import('/.vitepress/components/PageBottom.vue')
})

/**
 *  minimum: 0.08,
    easing: 'ease',
    positionUsing: '',
    speed: 200,
    trickle: true,
    trickleRate: 0.02,
    trickleSpeed: 800,
    showSpinner: true,
    barSelector: '[role="bar"]',
    spinnerSelector: '[role="spinner"]',
    parent: 'body',
 */
// NProgress.configure({
//   showSpinner: false,
// })

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
      'layout-bottom': () => h(MyLayoutBottom)
      // 'layout-top': () => h(BackgroundStyle)
    })
  },
  async enhanceApp({ app, router, siteData }) {
    // ...
    app.component('MarkdownImg');
    app.use(ElementPlus);

    if (!import.meta.env.SSR) {
      const NProgress = await import('nprogress')
      NProgress.configure({
        showSpinner: false,
      })

      router.onBeforeRouteChange = (to: String) => {
        NProgress.start();
      }
  
      router.onAfterRouteChanged = (to: String) => {
        NProgress.done()
      }
    }
  }
} satisfies Theme
